<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩计算</title>
    <link rel="stylesheet" href="../utils/bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <script src="../utils/bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../utils/icon/iconfont.css">
    <link rel="stylesheet" href="../css/shared.css">
    <style>
        /*中部布局*/
        .central-layout {
            display: grid;
            grid-template-rows: 40px 550px;
            width: 100%;
            margin: 0 auto;
        }

        /*中部底部布局*/
        .central-bottom-layout {
            display: grid;
            grid-template-rows: 50px 450px 50px;
            width: 80vw;
            margin: 0 auto;
        }

        /*中部底部头部布局*/
        .c-b-head {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 5px;
            justify-content: space-evenly;;
        }
    </style>
</head>
<body>
<div class="body-grid">
    <!--头部-->
    <div class="header-grid">
        <!--    返回按钮-->
        <div>
            <!--            <button class="btn btn-secondary iconfont go-back-button" onclick="window.location.href='card-issuance.html';">-->
            <!--                &#xe623;-->
            <!--            </button>-->
        </div>
        <!--    标题-->
        <div class="page-title" id="page-title">
            <script>
                document.getElementById("page-title").innerText=window.sessionStorage.getItem("competitionName")
                +"--成绩计算"
            </script>
        </div>   
        <div></div>
    </div>
    <!--中部-->
    <div class="central-layout">

        <div>
            <!--        顶部导航-->
            <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="window.location.href='batch.html'">批次管理
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='rule.html'">规则设置
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='start-game.html'">
                    开始比赛
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='calculate-score.html'">
                    成绩计算
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.href='replace-card.html'">补卡
                </button>
            </div>
        </div>

        <div class="central-bottom-layout">
            <div class="c-b-head">
                <label>
                    比赛项目：
                    <select id="project-search" onchange="showSearch()">
                        <option value="">全部</option>
                    </select>
                </label>
                <label>
                    最终结果：
                    <select id="last-result-decided" onchange="showSearch()">
                        <option value="">全部</option>
                        <option value="true">已确定</option>
                        <option value="false">未确定</option>
                    </select>
                </label>
            </div>
            <div class="table-responsive">
                <table id="score-table" class="table table-sm table-bordered text-center">
                    <thead>
                    <tr>
                        <th>比赛项目</th>
                        <th>组别</th>
                        <th>计算规则</th>
                        <th>成绩信息</th>
                        <th>最终结果</th>
                        <th>最终结果算法</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="score-tbody" class="table-group-divider">
                    </tbody>
                </table>
            </div>
            <div>
                <!--    分页组件-->
                <ul class="pagination page-ul-flex" id="pagination">
                </ul>
            </div>
        </div>

    </div>
    <!--尾部-->
    <div class="footer-grid">
        <!--网格留空-->
        <div></div>
        <!--进度条-->
        <div id="progress-bar" class="progress-bar-flex">
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">新增赛事</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">新增项目</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">设置组别</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">导入选手</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">下发号码</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">制卡</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">签到</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">批次管理</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">规则设置</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">开始比赛</div>
                <i class="iconfont progress-bar-arrow">&#xe604;</i>
            </div>
            <div class="progress-bar-grid">
                <button type="button" class="btn btn-success progress-bar-button" disabled></button>
                <div class="progress-bar-text">成绩计算</div>
                <i class="iconfont progress-bar-arrow" style="visibility: hidden;">&#xe604;</i>
            </div>
        </div>
        <!--   占位不能删-->
        <div>
        </div>
    </div>
</div>
<script src="../js/pages.js"></script>
<script src="../api/urls.js"></script>
<script src="../js/dialog.js"></script>
<script src="../js/progress.js"></script>
<script>
    updateProgress("progress-bar", CALCULATE_SCORE_PROGRESS);

    //页码
    let pageNum = 1;
    //一页多少条
    let pageSize = 20;
    //总条数
    let total;
    //总页数
    let pages;
    //请求记录
    let records;
    //项目id
    let projectId = null;
    //最终结果是否确定
    let isLastResultDecided = null;

    /**
     * 点击搜索
     */
    async function showSearch() {
        pageNum = 1;
        await showPage();
    }

    /**
     * 渲染表格
     */
    function drawScoreTable(records) {
        let tableBody = document.getElementById("score-tbody");
        tableBody.innerHTML = "";
        for (let record of records) {
            let trElement = document.createElement("tr");
            let tdElement1 = document.createElement("td");
            tdElement1.textContent = record.projectName;
            let tdElement2 = document.createElement("td");
            tdElement2.textContent = record.groupName;
            let tdElement31 = document.createElement("td");
            if(record.isRuleEdited){
                tdElement31.textContent = "已设置";
            }else {
                tdElement31.textContent = "未设置";
            }
            let tdElement3 = document.createElement("td");
            if(record.isGradeEntered){
                tdElement3.textContent = "已录入";
            }else {
                tdElement3.textContent = "未录入";
            }
            let tdElement4 = document.createElement("td");
            if(record.isLastResultDecided){
                tdElement4.textContent = "已确定";
            }else {
                tdElement4.textContent = "未确定";
            }
            let tdElement5 = document.createElement("td");
            tdElement5.textContent = record.lastAlgorithmName;
            let tdElement11 = document.createElement("td");
            let buttonElement1 = document.createElement("button");
            buttonElement1.classList.add("btn", "btn-primary", "btn-sm", "iconfont");
            buttonElement1.textContent = "\u{e6f7}计算成绩";
            if(!(record.isRuleEdited&&record.isGradeEntered)){
                buttonElement1.disabled=true;
            }
            buttonElement1.addEventListener("click", () => {
                // updateId = record.id;
                // openEditNumberDialog(record);
                window.sessionStorage.setItem("ruleId",record.ruleId);
                window.location.href="result.html";
            });
            tdElement11.append(buttonElement1);
            trElement.append(tdElement1, tdElement2, tdElement31,tdElement3, tdElement4, tdElement5, tdElement11);
            tableBody.append(trElement);
        }
    }

    //实现分页的方法
    async function getPage(pageNum, pageSize) {
        let searchInput = document.getElementById("project-search");
        projectId = searchInput.value;
        let lastResult = document.getElementById("last-result-decided");
        isLastResultDecided =lastResult.value;
        let url = new URL(GRADE_URL + "/searchAll");
        url.searchParams.set("pageNum", pageNum);
        url.searchParams.set("pageSize", pageSize);
        url.searchParams.set("competitionId", window.sessionStorage.getItem("competitionId"));
        if (projectId) {
            url.searchParams.set("projectId", projectId);
        }
        if(isLastResultDecided){
            url.searchParams.set("isLastResultDecided", isLastResultDecided);
        }
        await fetch(url).then(response => {
            if (response.ok && response.headers.get("Content-Type") === "application/json") {
                return response.json();
            } else {
                throw new Error(`未知相应状态 ${response.status}或Content-Type：${response.headers.get("Content-Type")}`);
            }
        }).then(pageInfo => {
            pages = pageInfo.pages;
            total = pageInfo.total;
            records = pageInfo.records;
            drawScoreTable(records);
        }).catch(error => {
            console.log("分页错误：", error);
        });
    }

    //上一页
    async function prePage() {
        pageNum = pageNum - 1;
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }

    //下一页
    async function nextPage() {
        pageNum = pageNum + 1;
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages)
    }

    //点击切换
    async function handlePage(page) {
        if (page !== pageNum) {
            pageNum = page
            await getPage(pageNum, pageSize);
            createpage(pageNum, pageSize, total, pages);
        }

    }

    /**
     * 改变每页条数
     */
    async function changePageSize(value) {
        pageSize = Number(value);
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }

    // 创建分页组件
    async function showPage() {
        await getPage(pageNum, pageSize);
        createpage(pageNum, pageSize, total, pages);
    }

    async function getProjectMenu() {

        let url = new URL(RULE_URL + "/getProjectMenu");
        url.searchParams.set("competitionId", window.sessionStorage.getItem("competitionId"));
        await fetch(url).then(r => {
            return r.json()
        }).then(result => {
            let projectSearch = document.getElementById("project-search");
            for (const projectMenu of result) {
                let option = document.createElement("option");
                option.value = projectMenu.projectId;
                option.textContent = projectMenu.projectName;
                projectSearch.append(option);
            }
        });
    }

    if (window.sessionStorage.getItem("competitionId")) {
        (async () => {
            await getProjectMenu();
            await showPage();
        })();
    }
</script>
</body>
</html>